
import { ref, reactive, onMounted, onUnmounted, provide, } from 'vue';
import {
    getEditClearancePropsForm,
    saveBatchEditClearanceProps,
    getBatchEditClearancePropsOptions
} from "@/api/modules/goodsArchive/list/information.ts";



import editCustomsClearanceComponent from './index.vue';


interface Ioptions {
    labe: string, value: string | number
}
interface IformDataItem {
    label: string,
    name: string,
    prop_id: string | number,
    value: string | number,
    options?: Ioptions[],
    attr?: object,
    type: string,
    placeholder: string
}

const businessType = 2; //1 qifa销售，2清关



const msg = reactive<Object>({
    title: 'goods_archive.edit_customs_clearance_props',
    title_sku: 'goods_archive.edit_customs_clearance_props_sku',
    content: '内容',
    tabTileBase: 'goods_archive.edit_base_info',
    tabTileSaleProps: 'goods_archive.sales_attr',
    tabTileCustomsClearanceProps: 'goods_archive.customs_clearance_attr',
    tabTileGoodsBarCode: 'goods_archive.goods_barcode',
    noModifications:"goods_archive.no_modifications",
    save:"merak.save",
    cancel:"merak.cancel"
  

})

/**
 * 定义一个针对不同节点类型配置的元素对象。
 * 此对象以节点类型为键，以该节点类型的配置对象为值。
 * 配置对象包括元素类型（如el-select或el-input）、元素属性（如class或multiple）、选项数组（options）以及一个异步函数（asyncFn）。
 * asyncFn是一个异步函数，用于根据参数获取options属性选项。
 */
const elementNodeTypeConfig = {
    "1": {
        type: "el-select",
        attr: {
            class: "qf_select",
            clearable:true
        },
        options: [],
        asyncFn: async (params) => {
            const { code, data } = await getBatchEditClearancePropsOptions(params);
            if (code == ResultEnum.SUCCESS) {
                return Promise.resolve(data)
            }
            return Promise.resolve(data)
        }
    },
    2: {
        type: "el-select",
        attr: {
            class: "qf_select",
            multiple: true,
            clearable:true
        },
        options: [],
        asyncFn: async (params) => {
            const { code, data } = await getBatchEditClearancePropsOptions(params);
            if (code == ResultEnum.SUCCESS) {
                return Promise.resolve(data)
            }
            return Promise.resolve(data)
        }
    },
    3: {
        type: "el-input",
        className: "qf_input",
        attr: {
            class: "qf_input",
            clearable:true
        }

    },
    4: {
        type: "el-input",
        className: "qf_textare",
        attr: {
            class: "qf_textare",
            type:"textarea",
            clearable:true
        }

    },
    5: {
        type: "el-input",
        className: "qf_input",
        attr: {
            class: "qf_input",
            clearable:true
        },
        vBind: 'v-number'
    }

}




const goodsEditCustomsClearanceProps = (proxy): Object => {
    const editCustomsClearanceVisible = ref<boolean>(false);
    const editCustomsClearanceFromConfig = ref<any>();
    const editCustomsClearanceFromData = ref<any>({});
    const msgType=ref<any>('');
    let queue = [];
    let editCustomsClearanceOptions = {
        saveCallback: (params) => { }
    }
    const editCustomsClearanceShowFn = async (params) => {
        // quickViewData.value=rowData
        editCustomsClearanceVisible.value = true;
            //判断是否是编辑货号属性，更换指的文案
            if(params?.query?.is_sku){
                msgType.value='_sku'
            }
        const { data } = await getEditClearancePropsForm({...params.query});
        queue = params.queue;
        typeof params.callback == "function" ? editCustomsClearanceOptions.saveCallback = params.callback : null;
        await createFormData(data);
        editCustomsClearanceFromConfig.value = data;

    }

    const editCustomsClearanceResetFn = () => {
        Object.keys(editCustomsClearanceFromData.value).map(key => {
            editCustomsClearanceFromData.value[key].value = ''
        });
        editCustomsClearanceVisible.value = false;
    }
    const editCustomsClearanceSavetFn = () => {
        let formData = {};
        Object.keys(editCustomsClearanceFromData.value).map(key => {
            formData[key] = editCustomsClearanceFromData.value[key].value;
        });
        editCustomsClearanceResetFn();
        editCustomsClearanceOptions.saveCallback({ queue, props:formData,type:businessType })
    }

    const createFormData = (data): Promise<any> => {
        data.filter((item) => {
            let itemConfig: IformDataItem = {
                label: item.label,
                name: item.property_en,
                prop_id: item.prop_id,
                value: '',
                placeholder: ""
            }
            itemConfig = Object.assign({}, itemConfig, elementNodeTypeConfig[item.prop_type]);
            if (elementNodeTypeConfig[item.prop_type]?.asyncFn) {
                elementNodeTypeConfig[item.prop_type].asyncFn({ id: item.prop_id, type: businessType }).then((optionsList) => {
                    itemConfig.options = ref<Ioptions[]>(optionsList);
                })
            }
            editCustomsClearanceFromData.value[item.property_en] = itemConfig;
            return false
        })

        return Promise.resolve()
    }

    const lang = () => {
        Object.keys(msg).map(key => {
            msg[key] = proxy.$t(msg[key])
        })
    }
    lang();



    provide('editCustomsClearanceVisible', editCustomsClearanceVisible);
    provide('editCustomsClearanceMsg', msg);
    provide("editCustomsClearanceFromData", editCustomsClearanceFromData);
    provide("editCustomsClearanceResetFn", editCustomsClearanceResetFn);
    provide("editCustomsClearanceSavetFn", editCustomsClearanceSavetFn);
    return {
        editCustomsClearanceComponent,
        editCustomsClearanceShowFn

    }
}

export default goodsEditCustomsClearanceProps



